<template>
  <!-- <div class="video-bg">
	<video width="320" height="240" autoplay loop muted>
		<source src="./assets/background-image.mp4" type="video/mp4">
		Your browser does not support the video tag.
	</video>
</div> -->

  <div class="main">
    <!--顶部导航栏菜单-->
    <header-component></header-component>

    <div class="wrapper">
      <!--左边导航栏菜单-->
      <!-- <left-component></left-component> -->
      <!-- 内容区域 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import HeaderComponent from "@/components/HeaderComponent";

export default {
  name: "App",
  components: { HeaderComponent },
  data() {
    return {};
  },
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /*background-color: red;*/
}

/*背景视频*/
.video-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*主页面*/
.main {
  background-color: #ffffff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* overflow: hidden; */
  position: relative;
  width: 100%;
  /* border-radius: 14px; */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 15px;
  font-weight: 500;
}
.wrapper {
  display: flex;
  flex-grow: 1;
  /* overflow: hidden; */
}

/* 一般浏览器的不要太小，容易看不见 */
html::-webkit-scrollbar {
  width: 8px;
}
html::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}
html::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
